<template>
    <div id="redBag">
        <div v-if="all">
                <div class="img">
                    <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/payment_background.png">
                </div>
            <div class="box">
                <!-- ----------------领红包  ------------------------>
                <div class="ground" v-if="type==1">
                    <div v-for="x in couponList">
                        <span class="icon">¥</span><span class="money">{{x.min_money}}</span>
                        <span class="dashed"></span>
                        <ul class="text">
                            <li class="top">{{x.msg}}</li>
                            <li class="bottom">满{{x.max_money}}元可用{{x.msg}}</li>
                        </ul>
                        <router-link to="/home/index/00" style="display:flex;"><button class="btn">{{type==1?'立即使用':'新拆一个红包'}}</button></router-link>
                    </div>
                </div>
                <!-- ----------------红包领完  ------------------------>
                <div class="ground" v-else>
                    <p class="contextTwo">真不巧，红包已经领完～</p>
                    <router-link to="/home/index/00" style="display:flex;"><button class="btnTwo">逛逛首页</button></router-link>
                </div>
            </div>
            <div class="luck">
                    <div class="look">
                        <p class="ground">看看大家手气</p>
                    </div>
                    <div class="get" v-for="m in recordList">
                        <img :src="m.data.headImg" >
                        <ul class="center">
                                <li>{{m.data.nickname}}</li>
                                <li>{{m.data.time}}领取</li>
                        </ul>
                        <ul class="luckey">
                            <li><span class="how">{{m.data.money}}元</span></li>
                            <li class="smallBtn" v-if="m.isMax==1">手气最佳</li>
                        </ul>
                    </div>
                    <p class="whoLuck" v-if="maxIsShow==2">最佳手气尚未出现&nbsp;&nbsp;稍后揭晓</p>
            </div>
            <div class="rule">
                    <div class="posi">
                        <p class="h1">活动规则</p>
                        <p>1.下单即可分享红包给小伙伴</p>
                        <p>2.每个链接仅限20人领取</p>
                        <p>3.每个链接会按领取顺序随机发放一个大额红包</p>
                        <p>4.领取红包前需先关注砍好货微信公众号</p>
                        <p>5.红包仅限在线支付使用</p>
                        <p>6.其他未尽事宜，请咨询客服</p>
                        <p>7.砍好货对该活动具有最终解释权</p>
                    </div>
            </div>
                <div class="space"></div>
           </div>
        <div  v-else class="background"></div>
        <div class="opactive" v-if="opaction"></div>
        <div class="contexts"  v-if="witch">
            <p>关注公众号,领手气红包~</P>
            <img :src="guanzhuInfo.codeUrl">
            <img :src="guanzhuInfo.imgFinger">
        </div>

    </div>
</template>

<script>
    import config from "../config/config.js";
    import share from "../share/share.js";
     export default {
            data(){
                return{
                    show:Boolean,   //红包的显示隐藏
                    witch:false,   //好友打开未关注
                    opaction:false,  //遮罩层
                    all:Boolean,        //主界面
                    guanzhuInfo:{},
                    couponList:{},
                    type:Number,
                    recordList:{},
                    maxIsShow:Number
                }
            },
        methods:{
            ShowOrderCoupon(couponShareId){
                var _self=this;
                var value=JSON.stringify({"couponShareId":couponShareId,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Coupon/ShowOrderCoupon',{
                    value:value,
                    key:key
                },config)
                    .then(function(response) {
                        if(response.data.code!==201){
                            _self.opaction=false;
                            _self.witch=false;
                            _self.all=true;
                            _self.couponList=response.data.data.data.couponList;
                            _self.type=response.data.data.type;
                            _self.recordList=response.data.data.data.recordList;
                            _self.maxIsShow=response.data.data.maxIsShow;
                        }else{
                            _self.opaction=true;
                            _self.witch=true;
                            _self.guanzhuInfo=response.data.data;
                            _self.all=false;
                        }
                        var link='/redbag/'+couponShareId;
                        var newLink=link.replace(/\//g,'*');
                            var obj={
                                title:'【砍好货】第'+response.data.data.maxNum+'个人领到的最大!',
                                desc:'百元惊喜等你来撩，手快有，手慢无',
                                link:newLink,
                                imgUrl:'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/redbag.png'
                            }
                            share(obj)

                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        },
         created(){
             this.ShowOrderCoupon(this.$route.params.couponShareid)
         },
         deactivated(){

         }

    }
</script>

<style>
    
</style>